<template>
  <el-card>
    <template #header>
      <h3>基础表格的使用</h3>
    </template>

    <base-table
      :data="tableData"
      :columns="columns"
      :page-options="pageOptions"
      @currentChange="handleCurrentChange"
    ></base-table>
  </el-card>
</template>
<script>
import usePagination from '../../../hook/usePagination'

export default {
  name: 'BasicTable',
  setup() {
    const { pageOptions, handleCurrentChange } = usePagination(
      { total: 100 },
      getData
    )
    const columns = [
      { prop: 'date', label: '日期', fixed: true },
      { prop: 'name', label: '姓名', componentName: 'dialog' },
      { prop: 'address', label: '地址', componentName: 'tooltip' },
      { prop: 'email', label: '邮箱', componentName: 'popover' },
      { prop: 'fax', label: '传真' }
    ]
    const tableData = [
      {
        date: '2021-10-10',
        name: '波仔',
        address: '海南省海口市海南大厦',
        email: '864181495@qq.com',
        fax: '2222 2222'
      }
    ]

    function getData(page) {
      console.log('current page', page)
    }

    return {
      columns,
      tableData,
      pageOptions,
      handleCurrentChange
    }
  }
}
</script>
